<template>
    <view>
        <view v-if="isLoad === null" class="margin-top load notexist text-l text-grey"></view>
        <view v-if="isLoad === false" class="margin-top load loading text-l text-grey"></view>

        <block v-if="isAdmin">
            <!-- parse <include src="./admin_meet_temp_tpl.wxml"/> -->
            <block>
                <view :class="'main-' + oprt">
                    <view class="text-pic-list-box">
                        <view class="item shadow" v-for="(item, index) in temps" :key="index">
                            <view class="title">
                                <text @tap="bindSelectTap" :data-idx="index" class="temp-name text-cut">{{ item.TEMP_NAME }}</text>
                                <button @tap="bindSelectTap" :data-idx="index" class="btn mid bg-blue text-white margin-right-s" style="font-weight: normal">选用</button>
                                <text @tap="bindOprtTap" :data-idx="index" class="icon-moreandroid more"></text>
                            </view>

                            <view class="time-list">
                                <view wx-for class="time-item" v-for="(timesItem, timesIndex) in item.TEMP_TIMES" :key="timesIndex">
                                    <view class="detail">
                                        <text class="up">{{ timesItem.start }}～{{ timesItem.end }}</text>
                                        <text v-if="timesItem.isLimit" class="text-blue">{{ timesItem.limit }}人</text>
                                        <text v-else class="text-blue">不限人数</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <cmpt-modal :show.sync="curTimeModalShow" type="dialog" title="批量设置人数上限" @click="bindAllLimitSetCmpt" class="modal-form">
                    <view class="modal-desc text-green">统一设置该模板下各时段可约人数</view>

                    <view class="form-group">
                        <view class="title">是否限制人数</view>
                        <switch v-if="curTimeIsLimit" @change="switchModel" data-item="curTimeIsLimit" class="green sm" :checked="true"></switch>
                        <switch v-else-if="!curTimeIsLimit" @change="switchModel" data-item="curTimeIsLimit" class="green sm"></switch>
                    </view>
                    <view class="form-group">
                        <view class="title">人数上限</view>
                        <block v-if="curTimeIsLimit">
                            <input type="number" maxlength="4" placeholder="请输入本时段人数上限" v-model="curTimeLimit" class="text-red margin-right-xs" />
                            人
                        </block>
                        <text v-else>不限制人数</text>
                    </view>
                </cmpt-modal>
            </block>
        </block>
    </view>
</template>

<script>
const AdminBiz = require('@/utils/comm/biz/admin_biz.js');
const behavior = require('@/utils/meet/admin_meet_temp_bh.js');

export default {
    data() {
        return {
            isLoad: '',
            isAdmin: false,
            oprt: '',
            temps: [],
            timesIndex: 0,

            timesItem: {
                start: '',
                end: '',
                isLimit: '',
                limit: ''
            },

            curTimeModalShow: '',
            curTimeIsLimit: '',
            curTimeLimit: ''
        };
    },
    mixins: [behavior],
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        if (!AdminBiz.isAdmin(this)) {
            return;
        }
        await this._loadList();
    },
    methods: {
        bindSelectTap() {
            console.log('占位：函数 bindSelectTap 未声明');
        },

        bindOprtTap() {
            console.log('占位：函数 bindOprtTap 未声明');
        },

        bindAllLimitSetCmpt() {
            console.log('占位：函数 bindAllLimitSetCmpt 未声明');
        },

        switchModel() {
            console.log('占位：函数 switchModel 未声明');
        }
    }
};
</script>
<style>
@import './admin_meet_temp.css';
</style>
